<template>
  <div class="manage">
    <div class="manage-header">

      <!-- 新增按钮 -->
      <el-button type="primary" @click="handlecreate">+ 新增</el-button>

      <!-- 对话框:点击新增或编辑才会弹出表单 -->
      <!-- :before-close="closeDialog" 点击关闭的x之前要做的事情 -->

        <!-- ref=form:为了通过this.$refs调用组件的方法 -->
        <el-dialog
            :title="modalType == 0 ? '新建' : '编辑'"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="closeDialog"
        >
          <!-- ref=form:为了通过this.$refs调用组件的方法 -->
          <el-form :inline="true" :model="form" ref="form" label-width="100px">
            <!-- 每一项表单域:el-form-item -->
            <el-form-item label="用户编号" prop="id">
              <el-input placeholder="请输入用户编号" v-model="form.id" :disabled="modalType != 0"></el-input>
            </el-form-item>

            <el-form-item label="姓名" prop="name">
              <el-input placeholder="请输入姓名" v-model="form.name"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
              <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>
            </el-form-item>

            <el-form-item label="账号名称" prop="username">
              <el-input placeholder="请输入账号名称" v-model="form.username"></el-input>
            </el-form-item>

            <el-form-item label="电话" prop="phone">
              <el-input placeholder="请输入电话" v-model="form.phone"></el-input>
            </el-form-item>

            <el-form-item label="创建时间" prop="createTime"  >
              <el-date-picker
                  type="datetime"
                  placeholder="选择创建时间"
                  v-model="form.createTime"
                  value-format="yyyy-MM-dd HH:mm:ss"

              ></el-date-picker>
            </el-form-item>

            <el-form-item label="修改时间" prop="updateTime"  >
              <el-date-picker
                  type="datetime"
                  placeholder="选择修改时间"
                  v-model="form.updateTime"
                  value-format="yyyy-MM-dd HH:mm:ss"

              ></el-date-picker>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closeDialog">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
          </div>
        </el-dialog>

      <!-- 搜索框 -->
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="searchForm.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="common-table">
      <!-- 用户数据Table -->
      <el-table  sum-text="用户信息表" :data="tableData" stripe style="width: 100%" height="90%">
        <el-table-column sortable prop="id" label="用户编号"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="password" label="密码"></el-table-column>
        <el-table-column prop="username" label="账号名称">
        </el-table-column>
        <el-table-column prop="phone" label="电话"></el-table-column>
        <el-table-column sortable prop="createTime" label="创建时间"></el-table-column>
        <el-table-column sortable prop="updateTime" label="修改时间"></el-table-column>
        <!-- 自定义列 -->
        <el-table-column width="300"  align="center" label="操作">
          <template slot-scope="scope">

            <el-button type="text" size="small" @click="handleEdit(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
            <el-button type="primary"  icon="el-icon-more" size="mini" @click="showDeadline(scope.row)">显示详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pager">
        <el-pagination layout="prev, pager, next" :total="total" @current-change="currentChange"></el-pagination>
      </div>
    </div>
  </div>
</template>
  
<script>
import { Message } from "element-ui";
import { getUser, createUser, deleteUser, updateUser } from "../api/index";
import ossUpload from "@/utils/oss-upload.vue";
export default {
  components: {
    ossUpload,
  },
  data() {
    return {
      // 表单绑定的数据
      form: {
        id: "",
        name: "",
        password: "",
        username: "",
        phone: "",
        createTime: "",
        updateTime: ""
      },
      // 表单验证规则
      rules: {
        id: [{ required: true, message: "请输入用户编号", trigger: "blur" }],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "密码长度不能少于6位", trigger: "blur" }
        ],
        username: [
          { required: true, message: "请输入账号名称", trigger: "blur" },
          { min: 4, message: "账号长度不能少于4位", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入电话", trigger: "blur" },
          { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }
        ],
        createTime: [{ required: true, message: "请选择创建时间", trigger: "change" }],
        updateTime: [{ required: true, message: "请选择修改时间", trigger: "change" }]
      },
      // 表单是否打开
      dialogVisible: false,
      // 列表数据
      tableData: [],
      // 打开表单:新建0,编辑1
      modalType: 0,
      // 分页的对象
      pageData: {
        page: 1,
        limit: 20
      },
      // 分页页数
      total: 0,
      // 搜索框表单
      searchForm: {
        name: ""
      }
    };
  },
  methods: {
    // 获取列表数据
    getList() {
      // 由接口文档知传入一个对象:要返回的是当前页面数据和搜索到的数据的交集
      getUser({ params: { ...this.pageData, ...this.searchForm } })
        .then(data => {
          console.log(data+"这个是这个后端返回的数据内容");
          
          this.tableData = data.data.page.list;
          this.total = data.data.page.totalCount || 0;
        })
        .catch(error => {
          console.log(error);
          Message.error("出现了这个错误请尝试重新修这个");
        });
    },
    // 表单提交
    submit() {
      // 要用箭头函数,若用function会报错,不知道为什么
      this.$refs.form.validate(valid => {
        // 符合校验
        if (valid) {
          // 提交数据
          if (this.modalType === 0) {
            createUser(this.form)
              .then(() => {
                this.getList();
              })
              .catch(error => {
                Message.error(error.message);
              });
          } else {
            // 编辑
            updateUser(this.form).then(() => {
              this.getList();
            });
          }
          // 清空,关闭
          this.closeDialog();
        }
      });
    },
    // 关闭对话框
    closeDialog() {
      // 先重置
      this.$refs.form.resetFields();
      // 后关闭
      this.dialogVisible = false;
    },
    // 编辑按钮
    handleEdit(index) {
      this.modalType = 1;
      this.openForm();
      // 深拷贝
      this.form = JSON.parse(JSON.stringify(index));
    },
    // 删除按钮
    handleDelete(index) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 删除操作:根据后端接口,参数是对象,id是唯一标识符
          deleteUser([index.id] ).then((data) => {
            if (data.data.code==200) {
              this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.getList();
            }else{
              Message.error(data.data.msg)
            }
           
          });
        })
        .catch(() => {
          // 点击取消:不删除了
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 新建按钮
    handlecreate() {
      this.modalType = 0;
      this.openForm();
    },
    // 打开表单
    openForm() {
      this.dialogVisible = true;
    },
    // 改变页码
    currentChange(val) {
      this.pageData.page = val;
      this.getList();
    },
    // 搜索
    search() {
      this.getList();
    }
  },
  mounted() {
    this.getList();
  }
};
</script>
  
<style lang="less" scoped>
.manage {
  height: 100%;

  .manage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .common-table {
    height: 90%;
    position: relative;

    .pager {
      position: absolute;
      right: 20px;
      bottom: 0;
    }
  }
}
</style>